<style type="text/css">
.company-form{
    float: left;
    border: 5px solid #C6C8C6;
    border-radius: 8px 8px 8px 8px;
    padding: 15px;
    width: 410px;        
}

div.form-wrapper {
    clear: both;
    overflow: auto;
}
div.form-label{
    clear: left;
    color: #777777;
    float: left;
    font-size: 0.9em;
    font-weight: bold;
    margin-bottom: 10px;
    overflow: hidden;
    padding: 4px 15px 0 2px;
    text-align: right;
    width: 150px;
}
div.form-element {
    clear: none;
    float: left;
    margin-bottom: 10px;
    max-width: 600px;
    min-width: 150px;
    overflow: hidden;
    text-align: left;
}
#fieldset-buttons {
    text-align: left;    
    margin-left: 163px;           
}
p.company_link{
    padding: 4px 15px 0 2px;
    width: 200px;    
}
p.company_link img{
    padding-right: 5px;
}

p.company_link.active,p.company_link:hover{
    background: #ECEFF5; 
    cursor: pointer;
}
p.company_link.active{
    padding-left: 15px;
}

p.company_link.create{
    color: #777777;    
    font-size: 0.9em;
/*    font-weight: bold;*/
    padding-left: 18px;    
}

#link.readonly{
     background:#f2f2f2; 
     color:#999; 
     border:1px solid #999;    
}

#hints{
    margin: 0 5px 10px 165px;
}
#hints p{
    padding-bottom: 0;
}

#image_upload{
    margin-left: 165px;
    margin-bottom: 15px;    
}
#image_upload.disabled{
    background: none repeat scroll 0 0 #F2F2F2;
    color: #111111;
}

#image{
    background: no-repeat scroll center center;
    float: left;  
    margin-left: 10px;
    /*margin-top: 40px;*/
    width: 100px;
    height: 100px;
    border: 1px solid #C6C8C6;
    border-radius: 8px 8px 8px 8px;
    z-index: 99;
}
#box_request{
	width: 140px;
	background: ffffff;
	border: 1px solid #000;
    border-radius: 8px;
    background: #eaf5f7;
	padding: 10px;
}
div.description{
    padding-bottom: 10px;
}
#box_notice{
	width: 200px;
	background: ffffff;
	border: 1px solid #000;
    border-radius: 8px;
    background: #eaf5f7;
	padding: 10px;
}
#request{
    text-decoration: none;
    color: #777777;
    font-size: 0.9em;
/*    font-weight: bold;*/
}
#icon_image_create {
    float: left;
/*    margin-right: 3px; */
    margin-top: 4px;
    width: 13px;
}
#icon_image_request {
    float: left;
    margin-right: 5px;
    margin-top: 4px;
    width: 13px;
}
#notice{
    display: none;
}
</style>
<div class="company-form">
<?php //echo $this->form->render($this) ?>

<!-- <div id="image"></div>-->
<form id="<?php echo $this->form->getAttrib('id');?>" name="<?php echo $this->form->getAttrib('name');?>" enctype="multipart/form-data" action="<?php echo $this->escape($this->form->getAction()) ?>" method="<?php echo $this->escape($this->form->getMethod()) ?>" class="global_form">
    <div>
        <div>
            <h3>
                <?php echo $this->translate($this->form->getTitle()) ?>
            </h3>
            <p class="form-description"><?php //echo $this->translate($this->form->getDescription()) ?></p>
            <div class="form-elements">
                <?php echo $this->form->getDecorator('FormErrors')->setElement($this->form)->render("");?>
                <?php if($this->form->getDecorator('FormMessages')->getMessages()) echo $this->form->getDecorator('FormMessages')->setElement($this->form)->render('');?> 
                
                <?php echo $this->form->title; ?>
                <?php echo $this->form->link; ?>
                <?php echo $this->form->country_id; ?>
                
                <div class="form-wrapper" id="image-wrapper"><div class="form-label" id="image-label"><label class="" for=""></label></div>
					<div class="form-element" id="image-element">
						<?php if($this->photo_url):?>
                        <div id="image" style="background-image: url(<?php echo $this->photo_url?>);: ;"></div>
                        <?php else:?>
                        <div id="image"></div>
                        <?php endif;?>
					</div>
				</div>
                
                <?php echo $this->form->image_upload; ?>
                <?php echo $this->form->file_id; ?>
                <?php echo $this->form->comp_id; ?>
                <?php echo $this->form->action_type; ?>
                <?php echo $this->form->buttons; ?>
            </div>
         </div>
    </div>
</form> 
</div>

<?php if($this->action_type):?>
    <script type="text/javascript">
        $('action_type').set('value','<?php echo $this->action_type?>');
    </script>
<?php endif;?>  
            
<script type="text/javascript">
function cancelCreate(){
    <?php if($this->admin):?>
        var href = en4.core.baseUrl + 'admin/webmix/webmix/edit/webmix_id/<?php echo $this->webmix_id?>';
        this.location.href = href;
    <?php else:?>
        var href = en4.core.baseUrl + 'webmix/index/index/webmix/<?php echo $this->webmix_id?>';
        this.location.href = href;
    <?php endif?>

}

function openUploadform(){
        var href = en4.core.baseUrl + 'webmix/company/upload';
        this.Smoothbox.open(href);
}

function setPhoto($photo_url,$photo_id){
    //console.log($photo_url); 
    $('file_id').set('value',$photo_id);
    $('image').setStyle('background-image','url('+$photo_url+')');
//    $('image').empty();       
//    $result = new Element('img', {
//        'src' : $photo_url,
//        }).inject($('image'));              
}

  
en4.core.runonce.add(function() {
    
    $('link-wrapper').setStyles({'display': 'none'});   
    $('image_upload').setStyles({'display': 'none'});

       
    $('link').set('readOnly','1');
    $('link').addClass('readonly');
    <?php if(!$this->isValidF):?>
    $('link').removeClass('readonly');
    $('link').set('readOnly','');
    <?php endif?>
    $('image_upload').set('disabled','1');
    $('image_upload').addClass('disabled');
    var hint = new Element('div', {
            'id' : 'hints',
            }).inject($('link-wrapper'),'after');  

	$('global_content').addEvent('click', function(e){
		if(e.target.get('id') != "request" && e.target.get('id') != "box_request"){
			box_request.setStyles({'display': 'none'});
			box_request.removeClass('active');
		}
        if(e.target.get('id') != "notice" && e.target.get('id') != "box_notice"){
			box_notice.setStyles({'display': 'none'});
			box_notice.removeClass('active');
		}
	});
    

    var icon_request = new Element('a', {
        'id' : 'request',
        //'src' : en4.core.baseUrl + 'application/modules/Webmix/externals/images/request_country.png',
        //'title' : '<?php echo $this->translate('Request Country');?>',
        'html' : "<img id='icon_image_request' src='application/modules/Webmix/externals/images/Create.png'>Add Country",
        styles : {
			'cursor' : 'pointer',
			'margin-left': '10px',
            'float': 'right',
			'margin-top': '1px'
        },
        events: {
			'click': function(e){
//				var position = $(this).getPosition(),
//					po_x = position.x + 100,
//					po_y = position.y;
//				$('box_request').setStyles({'top': po_y + 'px', 'left': po_x+'px', 'display': 'block'});
//				$('box_request').set('class', 'active');
                var href = en4.core.baseUrl + 'webmix/company/request';
                Smoothbox.open(href);				
			}
                
        }
        }).inject($('country_id'),'after');  
    var box_request = new Element('div', {
        'id' : 'box_request',
        'html' : '<?php echo $this->translate('%s to request country to list.', '<a href="'.$this->url(array('module'=>'webmix','controller'=>'company','action'=>'request'),'default',true).'" class="smoothbox">Click here</a>')?>',
        styles : {
			'position' : 'absolute',
			'top' : '0',
			'right' : '0',
			'display': 'none'
        }
        }).inject($('country_id'),'after');

	
    $('title').addEvent('keyup', function(e){  
     request = new Request.JSON({
          url : en4.core.baseUrl + 'webmix/ajax/get-company',
          data : {
            format : 'json',
            name : $(this).get('value')
          },
          onRequest: function(){
            $('hints').set('html', '<img src="'+ en4.core.baseUrl + 'application/modules/Core/externals/images/loading.gif' +'">');
          },
          onComplete: function(response) {
            $('link').set('value','');
            $('image').setStyle('background-image','');   
            $('link-wrapper').setStyles({'display': 'none'});   
            $('image_upload').setStyles({'display': 'none'});
            $('notice').setStyles({'display': 'none'});
            var name = "";
            $('link').addClass('readonly');
            $('link').set('readOnly','1');
            $('image_upload').set('disabled','1'); 
            $('image_upload').addClass('disabled');           
            for(var i = 0; i < response.length; i++){
                name += "<p class='company_link' id='"+response[i]['company_id']+"'> <img src='application/modules/Webmix/externals/images/flag/"+response[i]['key'].toLowerCase()+".png'>"+response[i]['title']+"</p>";    
          
            }
            if($('title').get('value')){
                name += "<p class='company_link create' id='0'> <img id='icon_image_create' src='application/modules/Webmix/externals/images/Create.png'>Create New</p>";
            }            
            $('hints').set('html', name);
            
            $$('p.company_link').each(function(el){
                $(el).addEvent('click',function(e){
                    $$('p.company_link').removeClass('active');
                    $(this).addClass('active');
                    $('comp_id').set('value',$(this).get('id'));
                    Fill($(this).get('id'));
                });
            });   
           }
        });
        request.send();
    });    
         
    var Fill = function(company_id){
        if(company_id != 0){
            request = new Request.JSON({
                url: en4.core.baseUrl + 'webmix/ajax/get-company',
                data : {
                    format : 'json',
                    id : $('comp_id').get('value')
                },
             onComplete: function(response) {
                
//                $('link-wrapper').setStyles({'display': 'none'});   
//                $('image_upload').setStyles({'display': 'none'});
//                $('notice').setStyles({'display': 'none'});
                $('hints').empty();
                   
                $('link').set('readOnly','1');
                $('image_upload').set('disabled','1');                         
                $('country_id').set('value',response[0]['country_id']);
                $('title').set('value',response[0]['title']);
                $('link').set('value',response[0]['link']);
//                $('link').set('value','');  
                $('image').setStyle('background-image','url('+response['photo_url']+')');                            
             }  
            });
            request.send();
        }  
        else{
            $('link-wrapper').setStyles({'display': 'block'});   
            $('image_upload').setStyles({'display': 'inline'});
            $('notice').setStyles({'display': 'inline'});
            $('link').set('value','');
            $('link').removeClass('readonly');
            $('link').set('readOnly','');
            $('image_upload').set('disabled','');
            $('image_upload').removeClass('disabled');            
            $('hints').empty();
            $('image').setStyle('background-image','');                            
        }                         
    }

    var Add_hint = function(){
        var link = $('link-wrapper');
        $result = new Element('div', {
            'id' : 'hints',
            }).inject(link,'after');                
    }

    var icon_notice = new Element('img', {
        'id' : 'notice',
        'src' : en4.core.baseUrl + 'application/modules/Webmix/externals/images/Question.png',
        styles : {
			'cursor' : 'pointer',
			'margin-left': '10px',
        },
        events: {
			'mouseover': function(e){
				var position = $(this).getPosition(),
					po_x = position.x + 20,
					po_y = position.y - 120;
				$('box_notice').setStyles({'top': po_y + 'px', 'left': po_x+'px', 'display': 'block'});
				$('box_notice').set('class', 'active');				
			},
            'mouseout': function(e){
                $('box_notice').setStyles({'display': 'none'});
                $('box_notice').removeClass('active');			
			}
        }
        }).inject($('image_upload'),'after');  
        
    var box_notice = new Element('div', {
        'id' : 'box_notice',
        'html' : '<?php echo $this->translate('<b>Notice:</b> You will be able to use your created block straight away. Please be advised that any uploaded photos may be replaced once your link has been approved by the system. If you have not uploaded a photo, the system will automatically add one once your link has been approved.')?>',
        styles : {
			'position' : 'absolute',
			'top' : '0',
			'right' : '0',
			'display': 'none'
        }
        }).inject($('image_upload'),'after');

});
</script>

